/*
 *dialog hooks
 * 弹窗 根据id获取数据 保存操作 清空操作 关闭操作等
 */
import { ref } from "vue";
import useForm from "@/hooks/use-form";
import { throttle } from "lodash-es";
import { ElMessage, ElMessageBox } from "element-plus";

export default function useDialog(emit, formData, modelValue) {
    // 表单通用formRef
    // 加载状态loadData
    // 重置表单clearForm
    // 判断数据是否已修改updateFlag
    // setInitData是一个方法，用来copy表单数据以来判断是否被修改
    // compareData是一个方法，用来比较表单数据是否被修改，从而改变updateFlag
    // filterFormData是一个方法,用来进行过滤数据，只传有效的数据，例如过滤掉空字符串，空数组等
    const {
        formRef,
        loadData,
        clearForm,
        updateFlag,
        setInitData,
        compareData,
        filterFormData,
    } = useForm(formData);

    // 弹窗标题
    const title = ref("");
    // 弹窗 标题前缀，一般需要defineExpose后在use-table-view内使用
    const preTitle = ref("");
    //  清空id/parentInfo,还原表单
    const clearDialogForm = () => {
        // if (props?.parentInfo) {
        //     clearParentInfo()
        // } else if (props?.id) {
        //     clearId()
        // }

        if (formRef?.value) {
            clearForm?.(); // 还原
        }
    };
    // =true 不关闭弹窗继续添加
    const saveFlag = ref(false);

    // 关闭弹窗 需要检查数据是否有修改时使用
    const close = () => {
        compareData?.();
        if (saveFlag?.value) {
            /*  '继续添加状态下的关闭弹窗
             *  不需要确认是否关闭
             *  必刷新table'
             * */
            emit("on-close");
            clearAndClose();
        } else {
            if (updateFlag.value) {
                ElMessageBox.confirm("修改尚未保存,是否确认退出?").then(() => {
                    clearAndClose();
                });
            } else {
                // 只读状态,or数据未修改时,直接关闭弹窗 ,不刷新view页面
                clearAndClose();
            }
        }
    };
    // 只读弹窗 关闭，不做数据修改判断
    const readClose = () => {
        modelValue.value = false;
    };
    /* 清空数据和关闭弹窗 */
    const clearAndClose = () => {
        // 还原formData
        clearDialogForm();
        modelValue.value = false;
    };
    /* 保存
     *  @params {function} saveMethod 发送formData的api
     *  @params {string} name 表单名，用于给用户显示正在修改的数据名（如：角色、菜单）
     *  @params {number} successMsg 保存成功后的提示，可自定义，留空时自动使用默认
     *  @params {function} initMethod 请求刷新tableData的方法，一般用于 继续添加 操作，没有获取最新tableData的需要时不用执行
     */
    const save = throttle(
        (saveMethod, name = "", successMsg = "", initMethod = null) => {
            // 比较数据是否修改过 true= 修改过 方法来自 use-form.js
            compareData?.();
            // updateFlag=false 表单未被修改，参数来自  use-form.js
            if (!updateFlag.value) {
                ElMessage.error({ message: "表单未被修改!" });
                return false;
            }
            let msg = "";
            if (formData?.setTitle) {
                // setTitle 自定义
                msg = formData.setTitle;
            } else if (formData?.id) {
                msg = "修改";
            } else {
                msg = "新增";
            }
            formRef?.value?.validate((valid) => {
                if (valid) {
                    ElMessageBox.confirm(`此操作将${msg}${name}, 是否继续?`, "保存提示")
                        .then(async () => {
                            loadData.loading = true;
                            try {
                                // filterFormData 过滤保存参数，只传输有值的或者已被修改的 方法来自 use-form.js
                                const _formData = await filterFormData?.();
                                await saveMethod?.(_formData);
                                const _successMsg = successMsg ?? `${msg}${name}成功`;
                                ElMessage.success({
                                    message: _successMsg,
                                });
                                if (saveFlag.value) {
                                    // =true 继续添加 不关闭弹窗
                                    // 还原表单
                                    clearForm?.();
                                    // 请求刷新tableData,如果formData编辑时不需要获取最新的tableData,则不需要执行initMethod()
                                    await initMethod?.();
                                } else {
                                    clearAndClose();
                                    emit("on-close");
                                }
                            } catch (e) {
                            } finally {
                                loadData.loading = false;
                            }
                        })
                        .catch(() => {
                            // 点击取消后 关闭loading
                            loadData.loading = false;
                        });
                }
            });
        },
        1000
    );
    /*
     * ctrl+shift+enter 快捷键提交表单
     */
    const quickSubmit = throttle((e, saveMethod) => {
        const evt = e || window.e || window.event;
        if (evt.ctrlKey) {
            saveMethod?.();
        }
    }, 1000);
    return {
        formRef,
        title,
        preTitle,
        loadData,
        save,
        quickSubmit,
        saveFlag,
        setInitData,
        clearDialogForm,
        readClose,
        clearAndClose,
        close,
    };
}
